<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令示例</title>
    <style>
        .red-txt {
            color: red;
        }

        .bg {
            background-color: #9F9F9F;
        }

        .green {
            color: #0C0C0C;
        }

        .item {
            display: inline-block;
            background-color: #3b5999;
            color: white;
            width: 100px;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }

        .item-bg {
            background-color: #2E2D3C;
        }
    </style>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 对方方式绑定样式 -->
        <!-- <h3 :class="{ 'red-txt': flag , bg : true}">指令练习</h3> -->
        <!-- <h3 class="bg" :class="{ 'red-txt': flag }" >指令练习</h3> -->

        <!-- 数组方式绑定样式 -->
        <!-- <h3 :class="[{ green: flag , 'red-txt' : !flag },'bg']" @click="change()">指令练习</h3> -->
        <h3 class="bg" :class="{ green: flag , 'red-txt' : !flag }" @click="change()">指令练习</h3>

        <div class="item" :class="{ 'item-bg': item.check}" v-for="(item, index) in arr" v-text="item.name"
            @click="checkFood(item)"></div>
        <p>选择的是：<span class="item">{{currFood}}</span></p>
        <hr>
        用户名：<input type="text" v-model="username" /><br />
        &nbsp;&nbsp;&nbsp;
        密码：<input type="password" v-model="pwd" /><br />
        &nbsp;&nbsp;&nbsp;
        性别：<input type="radio" v-model="sex" value="男" />男
        <input type="radio" v-model="sex" value="女" />女<br />
        &nbsp;&nbsp;&nbsp;
        爱好：
        <input type="checkbox" value="吃饭" v-model="hobby">吃饭
        <input type="checkbox" value="睡觉" v-model="hobby">睡觉
        <input type="checkbox" value="学习" v-model="hobby">学习<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button>注册</button>
        <button @click="resetUser()">重置</button>
        <p>
            您的注册信息如下：<br />
            用户名：{{username}}<br />
            密码：{{pwd}}<br />
            性别：{{sex}}<br />
            爱好：{{hobby}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                username: '',
                pwd: '',
                sex: '男',
                hobby: [],
                currFood: '',
                arr: [
                    { name: '大盘鸡', check: false },
                    { name: '拉面', check: false },
                    { name: '炒面', check: false },
                    { name: '烩面', check: false },
                    // { name: '刀削面', check: false },
                ],
                // arr: ['大盘鸡', '拉面', '炒面', '烩面', '刀削面'],
                flag: true,
            },
            methods: {
                resetUser() {
                    // 让表单元素都回到初始状态
                    // 用户名，密码为空，性别为男 ，爱好都是未勾选状态
                    this.username='';
                    this.pwd='';
                    this.sex='男';
                    this.hobby=[];

                    console.log('resetUser...');
                },
                checkFood(val) {
                    this.currFood = val.name; // 只展示名字
                    val.check = true; // 确定被选择
                    // 让其他菜单的check变成false
                    for (var i = 0; i < this.arr.length; i++) {
                        // 循环比对传入的名字，如果和当前不一样，都改为false
                        if (this.arr[i].name !== val.name) {
                            this.arr[i].check = false;
                        }
                    }
                    // console.log('checkFood..', val);
                },
                change() {
                    this.flag = !this.flag;
                }
            }
        });
        /*
            Vue绑定样式class：
                1.  :class="{样式1: 表达式1, 样式2:表达式2}"
                    根据表达式的布尔值，决定样式是否生效
                2.  :class="['样式1',{样式2:表达式2}]"
                    样式1是默认生效的，样式2要根据表达式2的布尔值来决定
        */
    </script>
</body>

</html>